<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="mootools/mootools.svn.js" type="text/javascript"></script>

<style type="text/css">
body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
#NewsTicker{
	border:solid 1px #cccccc;
	width:600px;
	height:200px;
	margin:0 auto;
}
	#NewsTicker h1{
	padding:6px;
	margin:0;
	border:0;
	background:#dfe7ed;
	color:#000000;
	font-size:11px;
	font-weight:bold;
	}
	#NewsVertical {
	width: 600px;
	height: 200px;
	display: block;
	overflow: hidden;
	position: relative;
	}
/* --------------- */
/* Ticker Vertical */
	#TickerVertical {
	width: 600px;
	height: 140px;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	}
	#TickerVertical li {
	width: 280px;
	color: #444444;
	text-align: left;
	font-size: 11px;
	margin: 0;
	padding: 6px 10px;
	float: left;
	height: 164px;
	display: inline;
	}
		#TickerVertical li .NewsTitle{
			display: block;
			color: #000000;
			font-size: 20px;
			margin-bottom:6px;
			font-family:Georgia, "Times New Roman", Times, serif;
		}
		#TickerVertical li .NewsTitle a:link,
		#TickerVertical li .NewsTitle a:Visited {
			display: block;
			color: #000000;
			margin-bottom:6px;
			text-decoration:underline;
		}
		#TickerVertical li .NewsTitle a:hover {
			text-decoration:none;
		}
		
		#TickerVertical li .NewsImg{
			float:left;
			margin-right:10px;
			border:solid 1px #DEDEDE;
		}
		#TickerVertical li .NewsFooter{
			display: block;
			font-size: 10px;
			margin:6px 0 14px 0;
			color:#000000
		}
</style>
</head>
<body>
<div id="NewsTicker">
  <h1>What's news? Visit <a href="http://woork.blogspot.com/">Woork.blogspot.com</a></h1>
	<div id="NewsVertical">
	  <ul id="TickerVertical">
        <li>
            <img src="pic/N0001.png" border="0" class="NewsImg"/>
            <span class="NewsTitle">
            <a href="http://www.nytimes.com/2008/07/29/world/europe/29pier.html?hp">Fire Destroys Historic English Pier</a>            </span>
        The Weston Grand at Weston-super-Mare was an iconic destination for vacationers for more than a century.<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>        </li>
        <li>
        	<img src="pic/N0002.png" border="0" class="NewsImg"/>
            <span class="NewsTitle">
            <a href="http://www.time.com/time/nation/article/0,8599,1826970,00.html">Foreclosure Rescue: Who Gets Help</a>            </span>
           Florida's Miami Gardens is one of the worst-hit areas in the housing crisis. But will the federal bailout save everyone?<span class="NewsFooter"><strong>Published July 22</strong> - 265 comments</span>        </li>
        <li>
            <img src="pic/N0003.png" border="0" class="NewsImg"/>
            <span class="NewsTitle">
            <a href="http://www.nasa.gov/topics/aeronautics/features/airventure2008.html">EAA AirVenture 2008</a>            </span>
          NASA and Administrator Mike Griffin join aviation enthusiasts and aerospace pioneers at EAA AirVenture 2008 in Oshkosh, Wis.<span class="NewsFooter"><strong>Published July 18</strong> - 342 comments</span>        </li>
        <li>
            <img src="pic/N0004.png" border="0" class="NewsImg"/>
            <span class="NewsTitle"><a href="http://www.nasa.gov/centers/dryden/news/Features/2008/survival.html">NASA Dryden, Air Force Flight Crews... </a></span>
          When flight crews have to bail out or eject from a crippled aircraft, they have to know how to survive once they hit the ground or water.<span class="NewsFooter"><strong>Published July 18</strong> - 342 comments</span>        </li>
    </ul>
  </div>
    <h2>More tutorials on: <a href="http://woork.blogspot.com">woork.blogspot.com</a></h2>
</div>
<script language="javascript" type="text/javascript">

			var Ticker = new Class({
				setOptions: function(options) {
					this.options = Object.extend({
						speed: 5000,
						delay: 5000,
						direction: 'vertical',
						onComplete: Class.empty,
						onStart: Class.empty
					}, options || {});
				},
				initialize: function(el,options){
					this.setOptions(options);
					this.el = $(el);
					this.items = this.el.getElements('li');
					var w = 0;
					var h = 0;
					if(this.options.direction.toLowerCase()=='horizontal') {
						h = this.el.getSize().size.y;
						this.items.each(function(li,index) {
							w += li.getSize().size.x;
						});
					} else {
						w = this.el.getSize().size.x;
						this.items.each(function(li,index) {
							h += li.getSize().size.y;
						});
					}
					this.el.setStyles({
						position: 'absolute',
						top: 0,
						left: 0,
						width: w,
						height: h
					});
					this.fx = new Fx.Styles(this.el,{duration:this.options.speed,onComplete:function() {
						var i = (this.current==0)?this.items.length:this.current;
						this.items[i-1].injectInside(this.el);
						this.el.setStyles({
							left:0,
							top:0
						});
					}.bind(this)});
					this.current = 0;
					this.next();
				},
				next: function() {
					this.current++;
					if (this.current >= this.items.length) this.current = 0;
					var pos = this.items[this.current];
					this.fx.start({
						top: -pos.offsetTop,
						left: -pos.offsetLeft
					});
					this.next.bind(this).delay(this.options.delay+this.options.speed);
				}
			});

			var hor = new Ticker('TickerVertical',{speed:1000,delay:4000,direction:'horizontal'});
		</script>
</body>
</html>